<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Vue.js初体验</title>
</head>

<body>
	<!-- 把root元素传给Vue实例，让Vue实例来管理该元素 -->
	<!-- message是一个变量，会去data里面找数据 -->
	<div id="root">
		你好,{{message}}!
		<h2>{{message}}</h2>
		<h1>{{name}}</h1>
	</div>
	<!-- 没有交给Vue实例管理 -->
	<div>{{message}}</div>

	<script src="./js/vue.js"></script>
	<!-- 
		声明式编程：直接显示就行了
		声明要显示的内容即可，内部Vue怎么处理的，我们不用管
		现在这种编程范式更加流行，不管是Angular，还是React
		声明式编程更好用，习惯就好了。

		好处：
		数据和界面完全分离：处理数据在data里面，处理界面的东西都在div里面处理。
	-->
	<script>
		const app = new Vue({
			// 对象的属性1：el---->用于挂载元素
			el: '#root',
			// 对象的属性2：data---->用于挂载要管理的元素
			data: {
				// 定义数据，和Angular类似的语法
				message: 'Vue.js',
				name: '尤雨溪'
			}
		})
		/*
			原始js的做法:也可能使用jQuery来开发-----这两种编程范式都叫命令式编程
			命令式编程：一步一步的告诉你怎么做，命令式的告诉你
		*/
		// 1.创建一个div元素，设置id属性
		// 2.定义一个变量message
		// 3.将message变量放在前面的div元素中显示

		// 4.修改message的数据：今天天气不错
		// 5.将修改后的数据再次替换到div元素中
	</script>
</body>

</html>